<template>
  <div>
    <div @click="goBack()">返回</div>
    <div class="main">
      <div class="box">
        <div :id="id" class="o-echarts"></div>
      </div>
      <div class="left"></div>
      <div class="right">
        <table class="table">
          <thead>
            <tr>
              <th>地区</th>
              <th>新增确诊</th>
              <th>累计确诊</th>
              <th>治愈</th>
              <th>死亡</th>
            </tr>
          </thead>
          <tr :key="item.name" v-for="item in this.fliterList()[0].children">
            <td>{{ item.name }}</td>
            <td>{{ item.today.confirm }}</td>
            <td>{{ item.total.confirm }}</td>
            <td>{{ item.total.heal }}</td>
            <td>{{ item.total.dead }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
export default {
  name: "province",
  data() {
    return {
      provinceName: this.$route.query.provinceName,
      province: this.$route.query.province,
      id: "echarts_" + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      option: {
        title: {
          text: `${this.$route.query.province}各地累计确诊病例`,
          top: "8%",
          left: "8%",
          textStyle: {
            fontSize: 18,
            fontWeight: 700,
            color: "black",
          },
        },
        tooltip: {
          padding: 0,
          // backgroundColor: "transparent",
          // 数据格式化
          formatter: function (params, callback) {
            return (
              params.seriesName + "</br>" + params.name + "：" + params.value
            );
          },
        },
        visualMap: {
          min: 0,
          max: 700,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 取值范围的文字
          inRange: {
            color: ["#ffffff", "#b80909"], // 取值范围的颜色
          },
          show: true, // 图注
        },
        geo: {
          map: "",
          roam: false, // 不开启缩放和平移
          zoom: 0.6, // 视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: 10,
              color: "#000",
            },
            emphasis: {
              show: true,
              color: "blue",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "skyblue", // 鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          left: "5%",
          right: "5%",
          top: "5%",
          bottom: "5%",
        },
        series: [
          {
            name: "累计确诊",
            type: "map",
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: "",
          },
        ],
        provinceJSON: {},
        provinceName: "",
      },
    };
  },
  mounted() {
    const provinceName = this.$route.query.provinceName;
    const province = this.$route.query.province;
    this.provinceName = provinceName;
    this.province = province;
    this.provinceJSON = require("../../utils/省份数据/json(省份)/" +
      provinceName);

    this.option.geo.map = province;
    this.option.series[0].data = this.convertData(
      this.fliterList()[0].children
    );
    this.echartObj = echarts.init(document.getElementById(this.id));
    echarts.registerMap(province, this.provinceJSON);
    this.echartObj.setOption(this.option);
    window.addEventListener("resize", () => {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize();
      }
    });
    console.log(this.fliterList()[0].children);
    this.initLine();
  },
  computed: {
    ...mapState({
      mylist: (state) => {
        return state.areaTree;
      },
    }),
  },
  methods: {
    convertData(data) {
      var res = [];
      let qu =
        "东城西城朝阳丰台石景山海淀顺义通州大兴房山门头沟昌平怀柔平谷黄浦徐汇长宁静安普陀虹口杨浦闵行宝山嘉定新金山松江青浦奉贤闸北";
      let xian =
        "延庆密云崇明城口丰都垫江忠云阳奉节巫山巫溪石柱土家族自治秀山土家族苗族自治酉阳土家族苗族自治彭水苗族土家族自治开梁平";
      for (var i = 0; i < data.length; i++) {
        if (data[i].name == "浦东") {
          res.push({
            name: data[i].name + "新区",
            value: data[i].total.confirm,
          });
        }
        if (qu.indexOf(data[i].name) != -1) {
          res.push({
            name: data[i].name + "区",
            value: data[i].total.confirm,
          });
        } else if (xian.indexOf(data[i].name) != -1) {
          res.push({
            name: data[i].name + "县",
            value: data[i].total.confirm,
          });
        } else if (
          data[i].name.charAt(data[i].name.length - 1) != "盟" &&
          data[i].name.charAt(data[i].name.length - 1) != "区" &&
          data[i].name.charAt(data[i].name.length - 1) != "市" &&
          data[i].name.charAt(data[i].name.length - 1) != "县"
          // data[i].name.charAt(data[i].name.length - 1) != "州"
        ) {
          res.push({
            name: data[i].name + "市",
            value: data[i].total.confirm,
          });
        } else {
          res.push({
            name: data[i].name,
            value: data[i].total.confirm,
          });
        }
        // }
      }
      return res;
    },
    goBack() {
      this.$router.go(-1);
    },
    fliterList() {
      return this.mylist.filter((item) => {
        return item.name === this.$route.query.province;
      });
    },
    initLine() {
      // 初始化echarts实例对象
      var myChart = echarts.init(document.querySelector(".left"));
      var option = {
        color: ["#d16060", "pink"],
        title: {
          text: "",
          textStyle: {
            fontSize: 30,
          },
          subtextStyle: {
            fontSize: 20,
          },
        },
        //提示框
        tooltip: {
          // trigger: 'item',
          trigger: "axis",
        },
        //图例  与series中的name匹配
        legend: {
          data: ["累计确诊", "新增确诊"],
          selected: {
            新增确诊: false,
          },
        },
        xAxis: {
          type: "category",
          data: this.fliterList()[0].children.map((v) => v.name),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "累计确诊",
            type: "bar", //图标类型
            data: this.fliterList()[0].children.map((v) => v.total.confirm),
          },
          {
            name: "新增确诊",
            type: "bar", //图标类型
            label: {
              show: true,
              rotate: 30,
              position: "top",
            },
            data: this.fliterList()[0].children.map((v) => v.today.confirm),
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss">
.o-echarts {
  height: 600px;
  width: 600px;
  margin: 0 400px;
}
.box {
  width: 100%;
  float: left;
}

.left,
.right {
  width: 400px;
  float: left;
  // background-color: green;
}

.left {
  margin-left: -100%;
  height: 400px;
}

.right {
  margin-left: -400px;
}
.main {
  width: 80%;
  margin: 15px auto;
}
.table {
  width: 100%;
  background: #e4a3a3;
  color: white;
  border: 0 solid #b80909;
  border-top: none;
  border-spacing: 0;
  tr {
    th {
      padding: 5px;
      white-space: nowrap;
      border: 1px solid #b80909;
    }
    td {
      padding: 5px 10px;
      width: 100px;
      white-space: nowrap;
      text-align: center;
      border: 1px solid #b80909;
    }
  }
}
</style>
